<template>
  <view class="page_root" data-page-name="交付项目看板" data-page-identification="y_v8b52rm5sc">
    <!-- UNI_APP_EXEGESIS_START NAVIGATION_TEMPLATE UNI_APP_EXEGESIS_END -->
    <!-- begin vid_aoxmr4zlzo 自定义模板_0nyhntc3p4 -->
    <view class="custom-tabs">
      <view class="custom-tab" :class="{ active: state.current === 0 }" @click="tabChange(0)">
        {{ tabList[0].name }}
        <span v-if="state.current === 0" class="custom-tab-underline"></span>
      </view>
      <view class="custom-tab" :class="{ active: state.current === 1 }" @click="tabChange(1)">
        {{ tabList[1].name }}
        <span v-if="state.current === 1" class="custom-tab-underline"></span>
      </view>
    </view>
    <view class="main">
      <view class="top-project">
        <view class="project-top">
          <view class="project-top-item">
            <text style="font-size: 24px; color: #3675ff">{{ state.progressProject }}</text
            ><text style="font-size: 14px; color: #3675ff">个</text>
            <view style="font-size: 14px">进行中项目数</view>
            <view style="font-size: 12px; text-decoration: underline; color: #3675ff" @click="handleRedirect(`/pages/Page3000000063/Page3000000063?name=${state.dataName}&type=进行中`);">详情</view>
          </view>
          <view class="project-top-item">
            <text style="font-size: 24px; color: #30bf78">{{ state.delivered }}</text
            ><text style="font-size: 14px; color: #30bf78">个</text>
            <view style="font-size: 14px">已交付项目数</view>
            <view style="font-size: 12px; text-decoration: underline; color: #3675ff" @click="handleRedirect(`/pages/Page3000000063/Page3000000063?name=${state.dataName}&type=已交付`);">详情</view>
          </view>
          <view class="project-top-item">
            <text style="font-size: 24px; color: #fa6400">{{ state.delayedProject }}</text
            ><text style="font-size: 14px; color: #fa6400">个</text>
            <view style="font-size: 14px">延期项目数</view>
            <view style="font-size: 12px; text-decoration: underline; color: #3675ff" @click="handleRedirect(`/pages/Page3000000063/Page3000000063?name=${state.dataName}&type=延期`);">详情</view>
          </view>
        </view>
        <view class="project-bottom">
          <view class="left-container">
            <u-icon name="rmb-circle" size="20px" style="margin-right: 5px"></u-icon>
            <text class="amount">待回款金额</text>
            <text class="value">{{ state.pendingPayment }}</text>
            <text class="unit">万元</text>
          </view>
          <text class="details" @click="handleRedirect(`/pages/Page3000000063/Page3000000063?name=${state.dataName}&type=待回款`);">详情</text>
        </view>
      </view>
      <view class="pie-out">
        <view class="pie-title">
          <view> <u-icon name="rewind-right-fill" color="#00FFFB" size="16px"></u-icon></view>
          <view class="title-font"> 进行中项目状态结构 </view>
        </view>
        <view class="pie-content">
          <!-- <view ref="progressChart" class="chart" /> -->
          <view class="pie-chart">
            <canvas id="progressChart" canvas-id="progressChart"></canvas>
          </view>
          <view class="project-list">
            <view v-for="(item, index) in state.pieChartData" :key="index" class="project-class" :style="boxShadowStyle(index)">
              <u-row>
                <u-col text-align="left" style="margin-left: 15px;" span="6" class="project-name">{{ index + 1 }}、{{ item.project_phase_name }}</u-col>
                <u-col class="project-count" text-align="center" span="2"
                  >{{
                item.count_project

                  }}个</u-col
                >
                <u-col class="project-percent" text-align="center" span="3">{{ ((item.count_project / state.totalProjectCount) * 100).toFixed(2) }}%</u-col>
              </u-row>
            </view>
          </view>
        </view>
      </view>
      <view class="line-out">
        <view class="line-title">
          <view> <u-icon name="rewind-right-fill" color="#00FFFB" size="16px"></u-icon></view>
          <view class="line-title-font"> 项目回款和工时成本趋势分析 </view>
        </view>
        <view class="line-content">
          <view class="line-chart">
            <canvas id="collectionChart" canvas-id="collectionChart"></canvas>
          </view>
        </view>
      </view>
      <view class="budget-out">
        <view class="budget-title">
          <view> <u-icon name="rewind-right-fill" color="#00FFFB" size="16px"></u-icon></view>
          <view class="budget-title-font"> 项目预算详情 </view>
        </view>
        <view class="budget-content">
          <view class="budget-legend">
            <u-row>
              <u-col span="4" text-align="right">
                <view class="col-content">
                  <view class="line"></view>
                  计划回款
                </view>
              </u-col>
              <u-col span="4" text-align="center">
                <view class="col-content-second">
                  <view class="line"></view>
                  实际回款
                </view>
              </u-col>
              <u-col span="4" text-align="center">
                <view class="col-content-three">
                  <view class="line"></view>
                  工时成本
                </view></u-col
              >
            </u-row>
          </view>
          <view class="budget-content-main">
            <view v-for="(item, index) in state.budgetChartData" :key="index" class="budget-item">
              <view class="budge-item-font">{{ item.project_name }}</view>
              <view class="budget-item-content">
                <u-line-progress inactive-color="#fff" :show-percent="false" style="height: 10px; border-radius: 10px" active-color="#3B7BFF" :percent="item['计划回款'] / 5" /><view
                  style="width: 30%; color: #3b7bff; text-align: right"
                  >{{
                  item['计划回款']
                  }}万元</view
                >
              </view>
              <view class="budget-item-content">
                <u-line-progress inactive-color="#fff" :show-percent="false" style="height: 10px; border-radius: 10px" active-color="#36CBCB" :percent="item['实际回款'] / 5" /><view
                  style="width: 30%; color: #36cbcb; text-align: right"
                  >{{
                  item['实际回款']
                  }}万元</view
                >
              </view>
              <view class="budget-item-content">
                <u-line-progress inactive-color="#fff" :show-percent="false" style="height: 10px; border-radius: 10px" active-color="#896AFF" :percent="item['工时成本'] / 5" /><view
                  style="width: 30%; color: #896aff; text-align: right;"
                  >{{
                  item['工时成本']
                  }}万元</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 项目阶段完成情况 -->
      <view class="milepost-out">
        <view class="milepost-title">
          <view> <u-icon name="rewind-right-fill" color="#00FFFB" size="16px"></u-icon></view>
          <view class="milepost-title-font"> 项目预算详情 </view>
        </view>
        <view class="milepost-content">
          <scroll-view class="milepost-table">
            <u-table>
              <u-tr>
                <u-th class="table-header" width="50%">项目</u-th>
                <u-th class="table-header" width="30%">当前项目阶段</u-th>
                <u-th class="table-header" width="20%">完成进度</u-th>
              </u-tr>
              <scroll-view style="max-height: 420px;" scroll-y="true">
                <u-tr v-for="(item, index) in state.milepostData" :key="index">
                  <u-td class="table-content" width="50%">{{ item['项目'] }}</u-td>
                  <u-td class="table-content" width="30%">{{ item['阶段'] }}</u-td>
                  <u-td class="table-content" width="20%">{{ item['完成进度(%)'] }}%</u-td>
                </u-tr>
              </scroll-view>
            </u-table>
          </scroll-view>
        </view>
      </view>
      <!-- 项目阶段完成情况 -->
      <!-- 上月项目投入结构 -->
      <view class="input-out">
        <view class="input-title">
          <view> <u-icon name="rewind-right-fill" color="#00FFFB" size="16px"></u-icon></view>
          <view class="input-title-font"> 上月项目投入工时结构分析 </view>
        </view>
        <view class="input-content">
          <view class="input-chart">
            <canvas id="inputChart" canvas-id="inputChart"></canvas>
          </view>
          <view class="input-content-list">
            <view v-for="(item, index) in state.inputChartData" :key="index" class="project-input-class" :style="boxShadowStyle(index)">
              <scroll-view :scroll-x="true" class="project-input-item-name">{{
              item['项目']
              }}</scroll-view>
              <scroll-view :scroll-x="true" class="project-input-item-time">{{ item['工时(小时)'] }}小时</scroll-view>
              <view class="project-input-item-pecent">{{ item['工时占比（%）'] }}%</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 上月项目投入结构 -->
    </view>
    <!-- end vid_aoxmr4zlzo 自定义模板_0nyhntc3p4 -->
  </view>
</template>
<script setup>

  import {
    ref,reactive,toRaw,markRaw,
    watch,computed,
    onBeforeMount,onMounted,onBeforeUnmount,onUnmounted,onActivated,onDeactivated,getCurrentInstance
  } from "vue";
  import { useRoute } from 'vue-router';
  const route = useRoute();
  import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
  import { isEqual, cloneDeep, isNullOrEmpty, isEmptyArr, isArray, isNullOrUnDef, localGet, traversalTreeStructure, set, checkCaseCondition, throttle, merge, switchCase, dateParse, debounce, isContained } from '@/utils/index';
  import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
  import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
  import { FormFormat } from '@/utils/formFormat'
  import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark'
  import dayjs from 'dayjs';
  /*** UNI_APP_EXEGESIS ***
  import { handleRedirect, permission } from '@/utils/common'
  import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll } from '@dcloudio/uni-app'
  *** UNI_APP_EXEGESIS ***/


  // ---------------------------- 属性定义 ----------------------------
  const sourceId = "page3000000046"

    // 是否显示菜单按钮
    const isMenuIconShow = false;
    // NAVIGATION_MENU
    const handleShowNavigation = ()=>{};


  const setTimeOutList = [];


      const vid_aoxmr4zlzo_props = reactive({
        code: "<view class=\"custom-tabs\">\n    <view class=\"custom-tab\" :class=\"{ active: state.current === 0 }\" @click=\"tabChange(0)\">\n      {{ tabList[0].name }}\n      <span v-if=\"state.current === 0\" class=\"custom-tab-underline\"></span>\n    </view>\n    <view class=\"custom-tab\" :class=\"{ active: state.current === 1 }\" @click=\"tabChange(1)\">\n      {{ tabList[1].name }}\n      <span v-if=\"state.current === 1\" class=\"custom-tab-underline\"></span>\n    </view>\n  </view>\n  <view class=\"main\">\n    <view class=\"top-project\">\n      <view class=\"project-top\">\n        <view class=\"project-top-item\">\n          <text style=\"font-size: 24px; color: #3675ff\">{{ state.progressProject }}</text\n          ><text style=\"font-size: 14px; color: #3675ff\">个</text>\n          <view style=\"font-size: 14px\">进行中项目数</view>\n          <view\n            style=\"font-size: 12px; text-decoration: underline; color: #3675ff\"\n            @click=\"handleRedirect(`/pages/Page3000000063/Page3000000063?name=${state.dataName}&type=进行中`);\"\n            >详情</view\n          >\n        </view>\n        <view class=\"project-top-item\">\n          <text style=\"font-size: 24px; color: #30bf78\">{{ state.delivered }}</text\n          ><text style=\"font-size: 14px; color: #30bf78\">个</text>\n          <view style=\"font-size: 14px\">已交付项目数</view>\n          <view\n            style=\"font-size: 12px; text-decoration: underline; color: #3675ff\"\n            @click=\"handleRedirect(`/pages/Page3000000063/Page3000000063?name=${state.dataName}&type=已交付`);\"\n            >详情</view\n          >\n        </view>\n        <view class=\"project-top-item\">\n          <text style=\"font-size: 24px; color: #fa6400\">{{ state.delayedProject }}</text\n          ><text style=\"font-size: 14px; color: #fa6400\">个</text>\n          <view style=\"font-size: 14px\">延期项目数</view>\n          <view\n            style=\"font-size: 12px; text-decoration: underline; color: #3675ff\"\n            @click=\"handleRedirect(`/pages/Page3000000063/Page3000000063?name=${state.dataName}&type=延期`);\"\n            >详情</view\n          >\n        </view>\n      </view>\n      <view class=\"project-bottom\">\n        <view class=\"left-container\">\n          <u-icon name=\"rmb-circle\" size=\"20px\" style=\"margin-right: 5px\"></u-icon>\n          <text class=\"amount\">待回款金额</text>\n          <text class=\"value\">{{ state.pendingPayment }}</text>\n          <text class=\"unit\">万元</text>\n        </view>\n        <text class=\"details\"  @click=\"handleRedirect(`/pages/Page3000000063/Page3000000063?name=${state.dataName}&type=待回款`);\">详情</text>\n      </view>\n    </view>\n    <view class=\"pie-out\">\n      <view class=\"pie-title\">\n        <view> <u-icon name=\"rewind-right-fill\" color=\"#00FFFB\" size=\"16px\"></u-icon></view>\n        <view class=\"title-font\"> 进行中项目状态结构 </view>\n      </view>\n      <view class=\"pie-content\">\n        <!-- <view ref=\"progressChart\" class=\"chart\" /> -->\n        <view class=\"pie-chart\">\n          <canvas id=\"progressChart\" canvas-id=\"progressChart\"></canvas>\n        </view>\n        <view class=\"project-list\">\n          <view\n            v-for=\"(item, index) in state.pieChartData\"\n            :key=\"index\"\n            class=\"project-class\"\n            :style=\"boxShadowStyle(index)\"\n          >\n            <u-row>\n              <u-col text-align=\"left\" style=\"margin-left: 15px;\" span=\"6\" class=\"project-name\"\n                >{{ index + 1 }}、{{ item.project_phase_name }}</u-col\n              >\n              <u-col class=\"project-count\" text-align=\"center\" span=\"2\">{{\n                item.count_project\n              }}个</u-col>\n              <u-col class=\"project-percent\" text-align=\"center\" span=\"3\"\n                >{{ ((item.count_project / state.totalProjectCount) * 100).toFixed(2) }}%</u-col\n              >\n            </u-row>\n          </view>\n        </view>\n      </view>\n    </view>\n    <view class=\"line-out\">\n      <view class=\"line-title\">\n        <view> <u-icon name=\"rewind-right-fill\" color=\"#00FFFB\" size=\"16px\"></u-icon></view>\n        <view class=\"line-title-font\"> 项目回款和工时成本趋势分析 </view>\n      </view>\n      <view class=\"line-content\">\n        <view class=\"line-chart\">\n          <canvas id=\"collectionChart\" canvas-id=\"collectionChart\"></canvas>\n        </view>\n      </view>\n    </view>\n      <view class=\"budget-out\">\n        <view class=\"budget-title\">\n          <view> <u-icon name=\"rewind-right-fill\" color=\"#00FFFB\" size=\"16px\"></u-icon></view>\n          <view class=\"budget-title-font\"> 项目预算详情 </view>\n        </view>\n        <view class=\"budget-content\">\n          <view class=\"budget-legend\">\n            <u-row>\n              <u-col span=\"4\" text-align=\"right\">\n                <view class=\"col-content\">\n                  <view class=\"line\"></view>\n                  计划回款\n                </view>\n              </u-col>\n              <u-col span=\"4\" text-align=\"center\">\n                <view class=\"col-content-second\">\n                  <view class=\"line\"></view>\n                  实际回款\n                </view>\n              </u-col>\n              <u-col span=\"4\" text-align=\"center\">\n                <view class=\"col-content-three\">\n                  <view class=\"line\"></view>\n                  工时成本\n                </view></u-col\n              >\n            </u-row>\n          </view>\n          <view class=\"budget-content-main\">\n            <view v-for=\"(item, index) in state.budgetChartData\" :key=\"index\" class=\"budget-item\">\n              <view class=\"budge-item-font\">{{ item.project_name }}</view>\n              <view class=\"budget-item-content\">\n                <u-line-progress\n                  inactive-color=\"#fff\"\n                  :show-percent=\"false\"\n                  style=\"height: 10px; border-radius: 10px\"\n                  active-color=\"#3B7BFF\"\n                  :percent=\"item['计划回款'] / 5\"\n                /><view style=\"width: 20%; color: #3b7bff; text-align: right\">{{\n                  item['计划回款']\n                }}</view>\n              </view>\n              <view class=\"budget-item-content\">\n                <u-line-progress\n                  inactive-color=\"#fff\"\n                  :show-percent=\"false\"\n                  style=\"height: 10px; border-radius: 10px\"\n                  active-color=\"#36CBCB\"\n                  :percent=\"item['实际回款'] / 5\"\n                /><view style=\"width: 20%; color: #36cbcb; text-align: right\">{{\n                  item['实际回款']\n                }}</view>\n              </view>\n              <view class=\"budget-item-content\">\n                <u-line-progress\n                  inactive-color=\"#fff\"\n                  :show-percent=\"false\"\n                  style=\"height: 10px; border-radius: 10px\"\n                  active-color=\"#896AFF\"\n                  :percent=\"item['工时成本'] / 5\"\n                /><view style=\"width: 20%; color: #896aff; text-align: right;\">{{\n                  item['工时成本']\n                }}</view>\n              </view>\n            </view>\n          </view>\n        </view>\n      </view>\n    <!-- 项目阶段完成情况 -->\n    <view class=\"milepost-out\">\n      <view class=\"milepost-title\">\n        <view> <u-icon name=\"rewind-right-fill\" color=\"#00FFFB\" size=\"16px\"></u-icon></view>\n        <view class=\"milepost-title-font\"> 项目预算详情 </view>\n      </view>\n  <view class=\"milepost-content\">\n          <scroll-view class=\"milepost-table\" >\n            <u-table>\n              <u-tr>\n                <u-th class=\"table-header\" width=\"50%\">项目</u-th>\n                <u-th class=\"table-header\" width=\"30%\">当前项目阶段</u-th>\n                <u-th class=\"table-header\" width=\"20%\">完成进度</u-th>\n              </u-tr>\n              <scroll-view style=\"max-height: 420px;\" scroll-y=\"true\">\n              <u-tr v-for=\"(item, index) in state.milepostData\" :key=\"index\">\n                <u-td class=\"table-content\" width=\"50%\">{{ item['项目'] }}</u-td>\n                <u-td class=\"table-content\" width=\"30%\">{{ item['阶段'] }}</u-td>\n                <u-td class=\"table-content\" width=\"20%\">{{ item['完成进度(%)'] }}%</u-td>\n              </u-tr>\n            </scroll-view>\n            </u-table>\n          </scroll-view>\n        </view>\n    </view>\n    <!-- 项目阶段完成情况 -->\n    <!-- 上月项目投入结构 -->\n    <view class=\"input-out\">\n      <view class=\"input-title\">\n        <view> <u-icon name=\"rewind-right-fill\" color=\"#00FFFB\" size=\"16px\"></u-icon></view>\n        <view class=\"input-title-font\"> 上月项目投入工时结构分析 </view>\n      </view>\n      <view class=\"input-content\">\n        <view class=\"input-chart\">\n          <canvas id=\"inputChart\" canvas-id=\"inputChart\"></canvas>\n        </view>\n        <view class=\"input-content-list\">\n          <view\n            v-for=\"(item, index) in state.inputChartData\"\n            :key=\"index\"\n            class=\"project-input-class\"\n            :style=\"boxShadowStyle(index)\"\n          >\n            <scroll-view :scroll-x=\"true\" class=\"project-input-item-name\">{{\n              item['项目']\n            }}</scroll-view>\n          <scroll-view :scroll-x=\"true\" class=\"project-input-item-time\">{{ item['工时(小时)'] }}小时</scroll-view>\n            <view class=\"project-input-item-pecent\">{{ item['工时占比（%）'] }}%</view>\n          </view>\n        </view>\n      </view>\n    </view>\n    <!-- 上月项目投入结构 -->\n  </view>",
    });



  // ============================ 属性定义 ============================

  // ---------------------------- 元素数据引用 ----------------------------
  // 组件 自定义模板_0nyhntc3p4 ref 的引用
  const vid_aoxmr4zlzo_ref = ref(null);
  // 动态key的map
  const fieldTypeMap = {};
  // 动态key的map
  const refMap = {vid_aoxmr4zlzo_ref};

  const showState = reactive({
      vid_aoxmr4zlzo_visible: true,
  })
  // ============================ 元素数据引用 ============================

  // ---------------------------- 数据 ----------------------------


  // ============================ 数据 ============================

  // ---------------------------- 方法 ----------------------------
  // ---------------------------- 页面数据 ----------------------------


  // ============================ 页面数据 ============================

  // ---------------------------- 响应 ----------------------------

  // ============================ 响应 ============================

  // ---------------------------- 函数 ----------------------------

  // 自定义函数 返回上一页
  const customFunction_goBack_3mywahb4fb =  (...params) => {
    uni.navigateBack()
  }

  // ============================ 函数 ============================

  // ---------------------------- 页面参数 ----------------------------

  const pageParameter_state = reactive({
      'processInstanceId': undefined,
  })

  // ============================ 页面参数 ============================

  // ---------------------------- 组件事件处理方法 ----------------------------


  // ============================ 组件事件处理方法 ============================

  // ============================ 方法 ============================

  // ---------------------------- 生命周期 ----------------------------

  const pageScrollTop = ref(0)

  // *** PREVIEW_EXEGESIS ***
  onMounted(() => {
    setPageParams(route.query)
    // 设置表单的rule
    try{

    }catch{
        // do nothing
    }
  });
  // *** PREVIEW_EXEGESIS *** //

  /*** UNI_APP_EXEGESIS ***
  const routeOption = ref({})
  onLoad((option) => {
    routeOption.value = option;
  });
  onReady(() => {
    setPageParams(routeOption.value)
    // 设置表单的rule
    try{

    }catch{
        // do nothing
    }
  });
  // 图表刷新标记
  const uChartsReshowFlag = ref(false);
  onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
      uChartsReshowFlag.value = false
  })
  onShow(() => {
      uChartsReshowFlag.value = true; // 页面激活后,标记置为true

      setPageParams(routeOption.value)
  })
  onPageScroll(e => {
      pageScrollTop.value = e.scrollTop
  });
  *** UNI_APP_EXEGESIS ***/

  const setPageParams = (routerParam)=>{
    const pageParams = [{"dataType":"STRING","dependencies":[],"name":"processInstanceId"}];
    const strategyMap = {
      STRING: (param, paramValue) => {
        pageParameter_state[param.name] = paramValue;
      },
      BOOLEAN: (param, paramValue) => {
        if('true' === (paramValue || '').toLowerCase()) {
          pageParameter_state[param.name] = true
        } else if('false' === (paramValue || '').toLowerCase()) {
          pageParameter_state[param.name] = false
        } else {
          // TODO: 是否要支持toast
          console.error('参数传入错误！类型不匹配！');
        }
      },
      NUMBER: (param, paramValue) => {
        if (!isNaN(paramValue)) {
          pageParameter_state[param.name] = Number(paramValue);
        } else {
          // TODO: 是否要支持toast
          console.error('参数传入错误！类型不匹配！');
        }
      },
      ARRAY: (param, paramValue) => {
        if (isNullOrUnDef(paramValue) || !paramValue || paramValue=== 'undefined') { // default value
          pageParameter_state[param.name] = [];
        } else if(paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
          try {
            pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
          } catch (error) {
            console.error('参数解析失败 ',error);
          }
        } else {
          console.error('参数传入错误！类型不匹配！');
        }
      },
    };
    pageParams.forEach((param) => {
      strategyMap[param.dataType](param, routerParam[param.name])
    });


  }

  onUnmounted(() => {
    // 销毁定时器
    setTimeOutList.forEach(({ repeat, timer }) => {
      repeat ?  clearInterval(timer): clearTimeout(timer);
    });
  });


  /*** UNI_APP_EXEGESIS ***
  onPullDownRefresh(() => {
    // 下拉刷新
    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 1000)
  })
  *** UNI_APP_EXEGESIS ***/

  // ============================ 生命周期 ============================

  // ---------------------------- 数据关联处理 ----------------------------
  // ---------------------------- 组件数据同步 ----------------------------

  // ============================ 组件数据同步 ============================
  //
  // ============================ 数据关联处理 ============================

  // ---------------------- 不同组件自定义的处理逻辑 ---------------------

  // ====================== 不同组件自定义的处理逻辑 ======================


  // ================================定制化逻辑========================================
  import * as echarts from 'echarts';

  onMounted(() => {
    getAllData();
  });

  const state = reactive({
    current: 0,
    //   默认查数据
    dataName: '傲林',
    //   延期项目数
    delayedProject: null,
    //   待回款项目数
    pendingPayment: null,
    //   已交付项目数
    delivered: null,
    //   进行中项目数
    progressProject: null,
    //   饼图数据
    pieChartData: [],
    //   饼图中所有数据的综合
    totalProjectCount: null,
    //   折现图数据
    lineChartData: [],
    //   柱状图数据
    budgetChartData: [],
    //   项目阶段完成表格数据
    milepostData: [],
    //   上月投入图表数据
    inputChartData: [],
    popupType: '',
    // 进行中项目详情表格数据
    progressData: [],
    // 已交付项目详情表格数据
    deliveredData: [],
    // 延期项目详情表格数据
    extensionData: [],
    // 卡片标签
    cardTitle: '',
    // 总工时
    totalWorkHours:null
  });
  const boxShadowColors = [
    '#896AFF',
    '#3875FF',
    '#21B0FF',
    '#36CBCB',
    '#F6BD15',
    '#FF9846',
    '#E96452',
    '#BD5DED',
    '#5E7092',
  ];
  const headStyle={
    fontWeight: 'bold',
  }
  const getProgressPercentage = (value) => {
    return computed(() => (value / 500) * 100);
  };
  const tabList = [
    {
      name: '傲林科技',
    },
    {
      name: '数智建材研究院',
    },
  ];
  function tabChange(index) {
    console.log(index, 'asdasdsad');
    state.current = index;
    if (index === 0) {
      state.dataName = '傲林';
      setTimeout(() => {
        getAllData();
      }, 500);
    } else {
      state.dataName = '研究院';
      setTimeout(() => {
        getAllData();
      }, 500);
    }
  }
    function getAllData() {
      getProgressProject();//获取进行中项目数
      getPendingPayment();
      getDelayedProject();
      getPieChartData();
      getDelivered();
      getLineChartData();
      getBudgetChartData();
      getMilepostTableData();
      getInputChartData();
      getProgressTableData();
      getDeliveredTableData();
      getExtensionTableData();
    }
  // 頂部饼图数据
  function getPieChartData() {
    const params = {
      dimensionFieldList: [
        {
          name: 'project_phase_name',
          alias: null,
          datasetFieldName: 'project_phase_name',
        },
      ],
      valueFieldList: [
        {
          name: 'count_project',
          alias: null,
          datasetFieldName: 'count_project',
          function: 'SUM',
        },
      ],
      legendFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      colorFieldList: [],
      fullData: true,
      tableName: '项目结构',
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: 'c1bddc87-0be3-437e-8dc1-ed1fa4dec434',
      componentId: 'vid_bbxeummnet',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: 'c1bddc87-0be3-437e-8dc1-ed1fa4dec434',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        state.pieChartData = dataList;
     setTimeout(()=>{
      initProgressChart(state.pieChartData);
     },100)
     getTotal();
      },
    );
  }
  // 渲染饼图
  function initProgressChart(data) {
    console.log(data,'饼图')
    const option = {
      color: ['#5E7092','#896AFF','#3875FF','#21B0FF','#36CBCB','#F6BD15','#FF9846','#E96452','#BD5DED'],
         tooltip: {
    trigger: 'item',
    triggerOn: 'click'
  },
      legend: {
        show: false,
      },
      title: {
        text: '项目总量\n',
        subtext: `${state.progressProject}个`,
        left: "center",
        top: "35%",
        textStyle: {
          fontSize: 14,
          color:'#262626',
          align: 'center',
        },
        subtextStyle: {
          color: '#3875FF',
          fontSize: 20,
          align: 'center',
          lineHeight: -5,
        },
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['60%', '80%'],
          avoidLabelOverlap: false,
               itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
          emphasis: {
            label: {
              show: true,
            },
          },
          labelLine: {
            length: 3,
          },
          data: (data ?? []).map((item) => {
            return { value: item.count_project, name: item.project_phase_name };
          }),
        },
      ],
    };
    //   #ifdef H5
    const ctx = document.getElementById('progressChart');
    // #endif
    const chart = echarts.init(ctx);
    chart.setOption(option);
  }
  // 待回款项目数
  function getPendingPayment() {
    const params = {
      dimensionFieldList: [],
      valueFieldList: [
        {
          name: 'repayment_amount',
          alias: null,
          datasetFieldName: 'repayment_amount',
          function: 'SUM',
        },
      ],
      legendFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      colorFieldList: [],
      fullData: true,
      tableName: '项目统计_待回款金额',
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: 'cb2c6251-a452-4b20-81de-6a9707977e99',
      componentId: 'vid_truk7a991p',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: 'cb2c6251-a452-4b20-81de-6a9707977e99',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        state.pendingPayment = dataList[0].repayment_amount;
      },
    );
  }
  // 已交付项目数
  function getDelivered() {
    const params = {
      dimensionFieldList: [],
      valueFieldList: [
        {
          name: 'finish_count',
          alias: null,
          datasetFieldName: 'finish_count',
          function: 'SUM',
        },
      ],
      legendFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        expression: {},
        children: [
          {
            operator: 'AND',
            children: [
              {
                expression: {
                  filterType: 'CONDITION',
                  filterCondition: {
                    conditionType: 'BELONG',
                    dateFormat: 'YYYY_MM_DD',
                    datasetFieldName: 'project_source',
                    nodeColumnName: 'project_source',
                    nodeColumnType: 'TEXT',
                    value: [state.dataName],
                  },
                },
              },
            ],
          },
          null,
        ],
      },
      colorFieldList: [],
      fullData: true,
      tableName: '项目统计_完成数',
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: '4c131fcc-37ae-41a0-a950-27262ca82258',
      componentId: 'vid_dwm2q8ygpm',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: '4c131fcc-37ae-41a0-a950-27262ca82258',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        state.delivered = dataList[0].finish_count;
      },
    );
  }
  // 延期項目数
  function getDelayedProject() {
    const params = {
      dimensionFieldList: [],
      valueFieldList: [
        {
          name: 'finish_count',
          alias: null,
          datasetFieldName: 'finish_count',
          function: 'SUM',
        },
      ],
      legendFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      colorFieldList: [],
      fullData: true,
      tableName: '项目统计_延期',
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: '8c76e81b-9d7a-47ff-a43d-dfb7e05076c3',
      componentId: 'vid_k6mn0s9wa6',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: '8c76e81b-9d7a-47ff-a43d-dfb7e05076c3',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        state.delayedProject = dataList[0].finish_count;
      },
    );
  }
  // 进行中项目
  function getProgressProject() {
    const params = {
      dimensionFieldList: [],
      valueFieldList: [
        {
          name: 'finish_count',
          alias: null,
          datasetFieldName: 'finish_count',
          function: 'SUM',
        },
      ],
      legendFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      colorFieldList: [],
      fullData: true,
      tableName: '项目统计_进行中',
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: 'd1993a57-27ba-4bd8-97fe-22b5aaf07663',
      componentId: 'vid_rmb5vh34w8',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: 'd1993a57-27ba-4bd8-97fe-22b5aaf07663',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        state.progressProject = dataList[0].finish_count;
      },
    );
  }

  // 算项目类别总和、
  function getTotal() {
    let totalProjectCount = 0;

    state.pieChartData.forEach((item) => {
      totalProjectCount += item.count_project;
    });
    state.totalProjectCount = totalProjectCount;
  }
  function boxShadowStyle(index) {
    const color = boxShadowColors[index % boxShadowColors.length];
    return `box-shadow: inset 4px 0px 0px 0px ${color}`;
  }
  // 折线图数据
  function getLineChartData() {
    const params = {
      dimensionFieldList: [
        {
          name: 'yf',
          alias: null,
          datasetFieldName: 'yf',
        },
      ],
      valueFieldList: [
        {
          name: 'zc',
          alias: '工时成本',
          datasetFieldName: 'zc',
          function: 'SUM',
        },
        {
          name: 'sr',
          alias: '实际回款',
          datasetFieldName: 'sr',
          function: 'SUM',
        },
      ],
      legendFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      colorFieldList: [],
      fullData: true,
      tableName: '项目成本统计',
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: 'dfc6f5e3-ac64-494e-bd03-7b085e551958',
      componentId: 'vid_fmjjlpmny2',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: 'dfc6f5e3-ac64-494e-bd03-7b085e551958',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        state.lineChartData = dataList;
        initLineChart(state.lineChartData);
      },
    );
  }
  // 渲染折线图
  function initLineChart(data) {
    const option = {
      color: ['#5087EC', '#68BBC4'],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          const seriesName = params[0].seriesName;
          const value = params[0].value;
          return `${seriesName}: ${value} 万元`;
        },
      },
      legend: {
        data: ['工时成本', '实际回款'], // 图例的数据
        itemStyle: {
          borderWidth: 0, // 设置图例项的边框宽度为0，即实心圆点
        },
      },
      xAxis: {
        type: 'category',
        data: (data ?? []).map((item) => item.yf),
      },
      yAxis: {
        type: 'value',
        name: '万元', // 设置 y 轴单位
      },
      series: [
        {
          name: '工时成本', // 添加 seriesName
          data: (data ?? []).map((item) => item.工时成本),
          type: 'line',
          label: {
            show: true,
            position: 'top', // 显示 label 在线条的上方
            formatter: '{c} ',
          },
        },
        {
          name: '实际回款', // 添加 seriesName
          data: (data ?? []).map((item) => item.实际回款),
          type: 'line',
          label: {
            show: true,
            position: 'top', // 显示 label 在线条的上方
            formatter: '{c} ',
          },
        },
      ],
    };
    //   #ifdef H5
    const ctx = document.getElementById('collectionChart');
    // #endif
    const chart = echarts.init(ctx);
    chart.setOption(option);
  }
  // 获取柱状图数据
  function getBudgetChartData() {
    const params = {
      dimensionFieldList: [
        {
          name: 'project_name',
          alias: null,
          datasetFieldName: 'project_name',
        },
      ],
      valueFieldList: [
        {
          name: 'plan_sr',
          alias: '计划回款',
          datasetFieldName: 'plan_sr',
          function: 'SUM',
        },
        {
          name: 'sr',
          alias: '实际回款',
          datasetFieldName: 'sr',
          function: 'SUM',
        },
        {
          name: 'zc',
          alias: '工时成本',
          datasetFieldName: 'zc',
          function: 'SUM',
        },
      ],
      legendFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      colorFieldList: [],
      fullData: true,
      tableName: '项目预算详情',
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: '735fb453-b449-4763-84e3-0a8abd58b111',
      componentId: 'vid_7ah7wbkqf6',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: '735fb453-b449-4763-84e3-0a8abd58b111',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        console.log(dataList,'预算数据')
        state.budgetChartData = dataList.sort((a,b)=>b['工时成本'] - a['工时成本']);

      },
    );
  }
  // 获取项目阶段完成情况表格数据
  function getMilepostTableData() {
    const params = {
      valueFieldList: [
        {
          name: 'project_name',
          alias: '项目',
          datasetFieldName: 'project_name',
        },
        {
          name: 'milepost_name',
          alias: '阶段',
          datasetFieldName: 'milepost_name',
        },
        {
          name: 'finish_schedule',
          alias: '完成进度(%)',
          datasetFieldName: 'finish_schedule',
        },
      ],
      rowFieldList: [],
      headFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      pageSize: 1000,
      pageNo: 1,
      fullData: true,
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: 'ecc83d46-c1da-4fff-89c8-591ca1adbf0d',
      tableName: '项目阶段完成情况',
      componentId: 'vid_xbdzcp39qm',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: 'ecc83d46-c1da-4fff-89c8-591ca1adbf0d',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        state.milepostData = dataList;
      },
    );
  }
  // 获取上月投入图表数据
  function getInputChartData() {
    const params = {
      valueFieldList: [
        {
          name: 'project_name',
          alias: '项目',
          datasetFieldName: 'project_name',
        },
        {
          name: 'work_hours',
          alias: '工时(小时)',
          datasetFieldName: 'work_hours',
        },
        {
          name: 'ratio',
          alias: '工时占比（%）',
          datasetFieldName: 'ratio',
        },
      ],
      rowFieldList: [],
      headFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      pageSize: 100,
      pageNo: 1,
      fullData: true,
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: '03e7140f-a452-4dde-84b6-2e53fb6bfefd',
      tableName: '上月工时投入分析',
      componentId: 'vid_pkyb7hy54z',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: '03e7140f-a452-4dde-84b6-2e53fb6bfefd',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        console.log(dataList,'project-input-class');
        state.inputChartData = dataList.sort((a, b) => b["工时占比（%）"] - a["工时占比（%）"]);
        let totalWorkHours = 0;

  // 遍历数据数组并累积工时字段的值
  dataList.forEach(item => {
    totalWorkHours += item["工时(小时)"];
  });
  state.totalWorkHours = totalWorkHours
        initInputChart(state.inputChartData);
      },
    );
  }
  // 渲染投入饼图
  function initInputChart(data) {
    const option = {
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      color: [
        '#5E7092',
        '#896AFF',
        '#3875FF',
        '#21B0FF',
        '#36CBCB',
        '#F6BD15',
        '#FF9846',
        '#E96452',
        '#BD5DED',
      ],
      tooltip: {
        trigger: 'item',
        triggerOn: 'click',
        position: function(point, params, dom, rect, size) {
      // Calculate the position of the tooltip based on the point and the size of the tooltip
      const x = point[0] + 10;
      const y = point[1];
      const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      const tooltipWidth = size.contentSize[0];
      const tooltipHeight = size.contentSize[1];

      // Adjust the position if the tooltip would be cut off
      if (x + tooltipWidth > screenWidth) {
        x = screenWidth - tooltipWidth - 20; // Adjust for padding
      }

      if (y + tooltipHeight > screenHeight) {
        y = screenHeight - tooltipHeight - 20; // Adjust for padding
      }

      // If the tooltip is on the left side of the screen, center it
      if (x < screenWidth / 2) {
        x = screenWidth / 2 - tooltipWidth / 2;
      }

      return [x, y];
    },
        extraCssText: 'width: 100px; white-space: normal;',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        show: false,
      },
      title: {
        text: '项目投入总工时\n',
        subtext: `${state.totalWorkHours}小时`,
        left: 'center',
        top: '35%',
        textStyle: {
          fontSize: 12,
          color: '#262626',
          align: 'center',
        },
        subtextStyle: {
          color: '#3875FF',
          fontSize: 16,
          align: 'center',
          lineHeight: -5,
        },
      },
      series: [
        {
          name: '工时占比',
          type: 'pie',
          radius: ['60%', '80%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            fontSize: 10,
            formatter: '{b}',
          },
          labelLine: {
            length: 3,
          },
          data: (data ?? []).map((item) => {
            return { value: item['工时(小时)'], name: item['项目'] };
          }),
        },
      ],
    };
    //   #ifdef H5
    const ctx = document.getElementById('inputChart');
    // #endif
    const chart = echarts.init(ctx);
    chart.setOption(option);
  }
  // 进行中项目数弹窗
  // 获取进行中项目详情数据
  function getProgressTableData() {
    const params = {
      valueFieldList: [
        {
          name: 'project_name',
          alias: '项目名称',
          datasetFieldName: 'project_name',
        },
        {
          name: 'milepost_name',
          alias: '当前项目阶段\t',
          datasetFieldName: 'milepost_name',
        },
        {
          name: 'contract_end_time',
          alias: '计划（合同完成时间）\t',
          datasetFieldName: 'contract_end_time',
          dateFormat: 'YYYY_MM_DD',
        },
        {
          name: 'total_money',
          alias: '合同总金额',
          datasetFieldName: 'total_money',
        },
        {
          name: 'hours_amount',
          alias: '项目支出',
          datasetFieldName: 'hours_amount',
        },
        {
          name: 'payment_money',
          alias: '项目回款',
          datasetFieldName: 'payment_money',
        },
        {
          name: 'pm_name',
          alias: '项目经理',
          datasetFieldName: 'pm_name',
        },
      ],
      rowFieldList: [],
      headFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      pageSize: 1000,
      pageNo: 1,
      fullData: true,
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: '271ec12c-082f-4bb7-8728-6ca3319dd347',
      tableName: '进行中项目明细',
      componentId: 'vid_8t69m4c2di',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: '271ec12c-082f-4bb7-8728-6ca3319dd347',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        state.progressData = dataList;
        state.cardTitle = '进行中项目数详情';
      },
    );
  }
  // 已交付项目详情
  function getDeliveredTableData() {
    const params = {
      valueFieldList: [
        {
          name: 'project_name',
          alias: '项目名称',
          datasetFieldName: 'project_name',
        },
        {
          name: 'contract_end_time',
          alias: '计划（合同完成时间）',
          datasetFieldName: 'contract_end_time',
          dateFormat: 'YYYY_MM_DD',
        },
        {
          name: 'end_time',
          alias: '实际完成时间',
          datasetFieldName: 'end_time',
          dateFormat: 'YYYY_MM_DD',
        },
        {
          name: 'total_money',
          alias: '合同总金额',
          datasetFieldName: 'total_money',
        },
        {
          name: 'hours_amount',
          alias: '项目支出',
          datasetFieldName: 'hours_amount',
        },
        {
          name: 'payment_money',
          alias: '项目回款',
          datasetFieldName: 'payment_money',
        },
        {
          name: 'pm_name',
          alias: '项目经理',
          datasetFieldName: 'pm_name',
        },
      ],
      rowFieldList: [],
      headFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      pageSize: 1000,
      pageNo: 1,
      fullData: true,
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: '37a58587-ac18-4a43-bc3e-89c875af6bc8',
      tableName: '已交付',
      componentId: 'vid_x1jjbr9lzp',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: '37a58587-ac18-4a43-bc3e-89c875af6bc8',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        state.deliveredData = dataList;
        state.cardTitle = '已交付项目数详情';
      },
    );
  }
  // 延期项目详情
  function getExtensionTableData() {
    const params = {
      valueFieldList: [
        {
          name: 'project_name',
          alias: '项目名称',
          datasetFieldName: 'project_name',
        },
        {
          name: 'milepost_name',
          alias: '当前项目阶段',
          datasetFieldName: 'milepost_name',
        },
        {
          name: 'contract_end_time',
          alias: '计划（合同完成时间）',
          datasetFieldName: 'contract_end_time',
          dateFormat: 'YYYY_MM_DD',
        },
        {
          name: 'delay_days',
          alias: '延期天数',
          datasetFieldName: 'delay_days',
        },
        {
          name: 'hours_amount',
          alias: '项目支出',
          datasetFieldName: 'hours_amount',
        },
        {
          name: 'payment_money',
          alias: '项目回款',
          datasetFieldName: 'payment_money',
        },
        {
          name: 'pm_name',
          alias: '项目经理',
          datasetFieldName: 'pm_name',
        },
      ],
      rowFieldList: [],
      headFieldList: [],
      filterConditionTree: {
        operator: 'AND',
        children: [
          {
            expression: {
              filterType: 'CONDITION',
              filterCondition: {
                conditionType: 'BELONG',
                dateFormat: 'YYYY_MM_DD',
                datasetFieldName: 'project_source',
                nodeColumnName: 'project_source',
                nodeColumnType: 'TEXT',
                value: [state.dataName],
              },
            },
          },
        ],
      },
      pageSize: 1000,
      pageNo: 1,
      fullData: true,
      dataAccessType: 'APPLICATION_RESOURCES',
      catalogId: 'NATIVE_DATASET',
      tableId: '78e967a3-9451-4337-b86f-e25d521f166f',
      tableName: '延期明细',
      componentId: 'vid_omp5sc5r1x',
      businessCode: 'NATIVE_DATASET',
      originTableBizCode: '78e967a3-9451-4337-b86f-e25d521f166f',
      dashboardType: 'OTHER',
    };
    post('/visualization-data/api/v1/data-center/dashboard/data', params).then(
      ({ data: { dataList } }) => {
        state.extensionData = dataList;
        state.cardTitle = '延期项目详情';
      },
    );
  }
</script>
<style lang="less" scoped>
  .page_root {
      min-height: 100%;
      box-sizing: border-box;
  }


  .page_root {
    min-height: 100%;
    box-sizing: border-box;
    background-color: #3675FF;
  }
  * {
    color: #262626;
  }
  .body {
    height: 100;
    background-color: #fff;
    padding: 12px;
    border-radius: 10px;
  }
  .custom-tabs {
    display: flex;
  }

  .custom-tab {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    background-color: transparent;
    position: relative;
    color: #ffffff;
    font-size: 16px;
    transition: border-color 0.6s;
    text-align: center;
    position: relative;
  }

  .custom-tab.active {
    background-color: transparent;
    color: #fff;
  }

  .custom-tab-underline {
    display: block;
    width: 40px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: calc(50% - 20px);
    transition: width 0.6s;
  }
  .main {
    margin-top: 12px;
    height: 100%;
    background: linear-gradient(180deg, #daf1ff 100%, #ffffff 0%);
    padding: 15px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
  .top-project {
    height: 167px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 38%, #ffffff 100%);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
  }
  .project-top {
    height: 89px;
    display: flex;
  }
  .project-top-item {
    flex: 1;
    border-right: 1px solid #e9e9e9;
    text-align: center;
    height: 74px;
  }
  .project-top-item:last-child {
   border: none;
  }
  .project-bottom {
    height: 48px;
    background: rgba(250, 100, 0, 0.1);
    border: 1px solid rgba(250, 100, 0, 1);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left-container {
    display: flex;
    align-items: center;
  }

  .project-bottom .icon {
    font-size: 16px;
    margin-right: 5px;
  }

  .project-bottom .amount {
    font-size: 14px;
    margin-right: 5px;
  }

  .project-bottom .value {
    position: relative;
    top: -2px;
    font-size: 24px;
    color: #fa6400;
    vertical-align: middle;
    margin-right: 5px;
    font-weight: 600;
  }

  .project-bottom .unit {
    font-size: 14px;
    margin-right: 5px;
  }

  .project-bottom .details {
    font-size: 14px;
    color: #3875ff;
    text-decoration: underline;
  }
  .budget-out {
    margin-top: -25px;
  }
  .pie-title,
  .line-title,
  .budget-title,
  .milepost-title,
  .input-title {
    height: 80px;
    background-image: linear-gradient(270deg, rgba(35, 139, 255, 0) 0%, #238bff 100%);
    border-radius: 8px;
    padding: 8px 15px;
    display: flex;
  }
  .pie-title .title-font,
  .line-title-font,
  .budget-title-font,
  .milepost-title-font,
  .input-title-font {
    font-size: 16px;
    color: #fff;
    margin-left: 8px;
  }

  .pie-content,
  .line-content,
  .budget-content,
  .milepost-content,
  .input-content {
    width: 100%;
    border: 1px solid #fff;
    position: relative;
    top: -40px;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.9) 50%,
      rgba(255, 255, 255, 0.8) 100%
    );
    border-radius: 8px;
    backdrop-filter: blur(5px); /* 添加模糊效果，可以调整模糊半径 */
  }

  .pie-chart {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .pie-chart #progressChart {
    width: 100%;
  }
  .project-list {
    overflow-y: scroll;
    font-size: 14px;
    padding: 0 15px;
    max-height: 378px;
  }
  .project-class {
    margin-bottom: 10px;
    border: 1px solid rgba(225, 228, 237, 1);
    border-radius: 5px;
    height: 32px;
    line-height: 30px;
  }
  .project-input-class {
    margin-bottom: 10px;
    border: 1px solid rgba(225, 228, 237, 1);
    border-radius: 5px;
    height: 32px;
    display: flex;
    padding: 0 5px 0 15px;
    line-height: 30px;
  }
  .project-input-item-name {
    white-space: nowrap;
    width: 60%;
    text-align: left;
  }
  .project-input-item-time {
    width: 20%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
  }
  .project-input-item-pecent {
    width: 20%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
  }
  .project-list .u-col {
    height: 32px;
    line-height: 32px;
  }
  .project-count {
    color: #3875ff;
    font-weight: 600;
  }
  .project-percent {
    color: #3875ff;
    font-weight: 600;
  }
  .line-out {
    margin-top: -25px;
  }
  .line-chart #collectionChart {
    width: 100%;
    height: 200px;
  }
  .budget-chart #budgetChart {
    width: 100%;
  }
  .budget-legend {
    margin: 10px 0;
  }
  .col-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .col-content-second {
    display: flex;
    align-items: center;
    justify-content: left;
  }
  .col-content-three {
    display: flex;
    align-items: center;
  }

  .col-content .line {
    width: 18px;
    height: 5px;
    background-color: #3b7bff; /* 设置横线的颜色 */
    margin-right: 4px; /* 调整横线与文字之间的距离 */
    margin-left: 4px;
  }
  .col-content-second .line {
    width: 18px;
    height: 5px;
    background-color: #36cbcb; /* 设置横线的颜色 */
    margin-right: 4px; /* 调整横线与文字之间的距离 */
    margin-left: 4px;
  }
  .col-content-three .line {
    width: 18px;
    height: 5px;
    background-color: #896aff; /* 设置横线的颜色 */
    margin-right: 4px; /* 调整横线与文字之间的距离 */
    margin-left: 4px;
  }
  .budget-item {
    padding: 0 15px;
  }
  .budget-item-content {
    display: flex;
    height: 15px;
    line-height: 10px;
    font-size: 14px;
    vertical-align: top;
    margin: 3px 0;
  }
  .budget-item-content .u-progress {
    height: 10px;
  }
  .budget-content-main {
    max-height: 488px;
    overflow: auto;
  }
  .budge-item-font {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .u-active {
    border-radius: 10px;
  }
  .milepost-out {
    margin-top: -25px;
  }
   .milepost-table {
      padding: 0 15px;
      max-height: 480px;
      margin-top: 15px;
      margin-bottom: 15px;
    }
  .table-header {
    background-color: #3875ff !important;
    color: #fff !important;
    text-align: center !important;
  }
  .detail-table-header {
    background-color: #3875ff !important;
    color: #fff !important;
    text-align: center !important;
  }
  .table-content {
    color: #000000 !important;
    text-align: center !important;
  }
  .input-content #inputChart {
    width: 100%;
  }
  .input-content-list {
  padding: 10px 15px 5px 15px;
    max-height: 368px;
    overflow-y: scroll;
  }
  .input-chart {
    margin-top: 15px;
      margin-bottom: 15px;
  }
  .input-project-item {
    width: 200%;
    display: inline-block;
    overflow: hidden;
  }
  .input-out {
    margin-top: -25px;
        max-height: 590px;
  }
  .card-close{
    position: relative;
    top: -55px;
    right: 0;
  }
  .detail-table{
    margin-top: 25px;
  }
  .card-title{
    margin-top: 15px;
   font-size: 16px;
   font-weight: 600;
   position: relative;
   padding: 0 10px;
  }
  .card-title:before{
    position: absolute;
    content: '';
    background-color: #3875ff;
    width: 16px;
    height: 16px;
    position: absolute;
    left: -10px;
    top: 60%;
    margin-top: -10px;

  }
</style>
